<template>
    <div class="footer mx-auto">
        <ul class="linkTop">
            <li><span>友情链接</span></li>
            <li v-for="(item, index) in linksTop" :key="index">
                <el-dropdown trigger="click">
                    <span class="el-dropdown-link">
                        {{ item.content1 }}
                        <el-icon class="el-icon--right" style="margin-left: 1vw;line-height: 4vh;">
                            <ElIconArrowDownBold />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>{{ item.content1 }}</el-dropdown-item>
                            <el-dropdown-item><a :href="item.src ? item.src : ''" target="_blank">{{ item.content2 ?
                                item.content2 : '' }}</a></el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </li>
        </ul>
        <div class="linlMiddle">
            <ul>
                <li v-for="(item, index) in linksMiddle" :key="index">
                    <NuxtLink>
                        <button>{{ item.content1 }}</button>
                    </NuxtLink>
                </li>
                <li @click="scrollToTop"><button>返回顶部</button></li>
            </ul>
        </div>
        <ul class="linkBottom px-auto mt-5">
            <li class="my-2">
                <span>湟源县人民政府办公室主办</span>
                <span> 湟源县电子政务中心 </span>
                <span>承办</span>
            </li>
            <li class="my-2">copyright 2009-2021 湟源县人民政府办公室, all rights reserved。</li>
            <li class="my-2">
                <span></span>
                <span><a href="https://beian.mps.gov.cn/#/query/webSearch">青公网安备: 63012302000015号</a> </span>
                <span>网站标识码：6301230001</span>
                <span><a href="https://beian.miit.gov.cn/#/Integrated/index">青ICP备19000437号-1</a></span>
            </li>
            <li class="my-2">地址：青海省西宁市湟源县城关镇建设西路76号 联系电话：0971-2432774</li>
            <li class="my-2">未经授权禁止转载、摘编、复制及建立镜像，违者将依法追究法律责任。</li>
        </ul>
        <!-- <p>API URL: {{ apiUrl }}</p>
        <p>Path: {{ route.path }}</p> -->

    </div>
</template>

<script setup>

const route = useRoute()
const config = useRuntimeConfig()

const apiUrl = config.public.apiUrl
const linksTop = ref(
    [
        {
            content1: '国家级政务网站',
            content2: '中国政府网',
            src: 'https://www.gov.cn/'
        },
        {
            content1: '省级政务网站',
            content2: '青海省政府门户网',
            src: 'http://www.qinghai.gov.cn/'
        },
        {
            content1: '市级政务网站',
            content2: '西宁市政府门户网',
            src: 'https://www.xining.gov.cn/'
        },
        {
            content1: '区县级政务网站',
            content2: '大通县政府门户网',
            src: 'https://www.datong.gov.cn/'
        },
        {
            content1: '县级政务网站'

        },
    ])
const linksMiddle = ref(
    [
        {
            content1: '在线留言',
            src: 'https://www.gov.cn/'
        },
        {
            content1: '关于我们',
            src: 'http://www.qinghai.gov.cn/'
        },
        {
            content1: '联系我们',
            src: 'https://www.xining.gov.cn/'
        },
    ])
const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' })
}
</script>

<style scoped lang="scss">
.footer {
    height: 360px;
    width: 60vw;
    margin-top: 10vh;

    .linkTop {
        display: flex;

        li {
            display: inline-block;
            flex: 1;
            border: 1px solid #cccccc;
            height: 4vh;
            line-height: 4vh;
            text-align: center;

            span {
                height: 4vh;
                line-height: 4vh;
                text-align: center;
                color: #000000;
            }
        }
    }

    .linlMiddle {
        margin-top: 3vh;
        background-color: #1e50ae;
        height: 5vh;
        line-height: 5vh;

        padding: 0 16vw;

        ul {
            display: flex;
            padding-left: 2vw;

            li {
                display: inline-block;
                flex: 1;

                button {
                    color: #FFFFFF;
                    font-size: 16px;
                    height: 2vh;
                    line-height: 2vh;
                    padding-right: 1vw;
                    border-right: 2px solid #FFFFFF;
                }

            }
        }

    }

    .linkBottom {

        // padding: 0 16vw;
        // width: 70vw;
        li {
            text-align: center;

        }

    }
}
</style>